<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    table {
      width: 600px;
      cursor: pointer;
    }

    table td {
      text-align: center;
    }

    table th {
      background-color: blueviolet;
    }

    table tr {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="dv">
    请输入姓名:
    <input type="text" value="" id="uname"/>
    <br/> 请输入邮箱:
    <input type="text" value="" id="email"/>
  </div>

  <input type="button" value="添加" id="btn" />
  <table border="1" cellpadding="0" cellspacing="0" id="tb">
    <thead>
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody id="tbd">
      <tr>
        <td>小黑</td>
        <td>xiaohei@126.com</td>
      </tr>
    </tbody>
  </table>
  <script>
    var btn = document.getElementById('btn');
    // 获取按钮注册点击事件
    btn.onclick = function () {
		var flag = true;
		// 获取文本框
		var uname = document.getElementById('uname');
		var email = document.getElementById('email');
		if(uname.value == '' || email.value == ''){
			alert('请将数据填入完全')
		    return;
		}
	    // 创建一行
	    var trObj = document.createElement('tr');
	    // 把行加入到tbody中
	    var tbd = document.getElementById('tbd');
	    tbd.appendChild(trObj);
	    // 创建列,添加到行中
	    var td1 = document.createElement('td');
	    td1.innerHTML = uname.value;
	    var td2 = document.createElement('td');
	    td2.innerHTML = email.value;
	    trObj.appendChild(td1);
	    trObj.appendChild(td2);

    };
  </script>

</body>

</html>